<template>
  <view class="rent-apply-page">
    <!-- 顶部导航 -->
    <u-navbar title="租赁申请" :auto-back="true" :border-bottom="true" />
    
    <!-- 申请进度 -->
    <view class="progress-section">
      <u-steps 
        :list="progressSteps"
        :current="currentStep"
        active-color="#4A90E2"
        direction="row"
      />
    </view>

    <scroll-view scroll-y class="page-content" @scrolltolower="handleScrollBottom">
      <!-- 设备信息卡片 -->
      <view class="device-card content-card">
        <view class="card-header">
          <text class="card-title">设备信息</text>
          <view class="device-status" :class="getStatusClass(deviceInfo.status)">
            {{ getStatusText(deviceInfo.status) }}
          </view>
        </view>
        
        <view class="device-info">
          <image 
            :src="deviceInfo.images?.[0] || '/static/placeholder-device.png'" 
            class="device-image" 
            mode="aspectFill"
            @click="previewDeviceImage"
          />
          <view class="device-details">
            <text class="device-title">{{ deviceInfo.title }}</text>
            <text class="device-subtitle">{{ deviceInfo.brand }} {{ deviceInfo.model }}</text>
            <text class="device-location">📍 {{ deviceInfo.location?.city }}</text>
            <view class="device-price">
              <text class="price-main">￥{{ deviceInfo.dailyRent }}/天</text>
              <text class="price-deposit">押金: ￥{{ deviceInfo.deposit }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 租赁信息表单 -->
      <view class="form-card content-card">
        <text class="card-title">租赁信息</text>
        
        <u-form :model="formData" ref="formRef" :rules="formRules" :error-type="['toast']">
          <!-- 租赁时间 -->
          <view class="date-section">
            <u-form-item label="租赁日期" prop="dateRange" class="form-item">
              <u-calendar 
                v-model="dateRange"
                mode="range"
                :min-date="minDate"
                :max-date="maxDate"
                :default-date="defaultDate"
                @confirm="onDateRangeChange"
                ref="calendarRef"
              >
                <template #default>
                  <view class="date-input" @click="showCalendar">
                    <text class="date-text" v-if="formData.startDate && formData.endDate">
                      {{ formatDate(formData.startDate) }} 至 {{ formatDate(formData.endDate) }}
                    </text>
                    <text class="date-placeholder" v-else>请选择租赁时间</text>
                    <u-icon name="calendar" size="16" />
                  </view>
                </template>
              </u-calendar>
            </u-form-item>
            
            <view class="rental-summary" v-if="rentalDays > 0">
              <text class="summary-text">租赁 {{ rentalDays }} 天</text>
              <text class="summary-amount">小计: ￥{{ subtotalAmount }}</text>
            </view>
          </view>

          <!-- 设备数量 -->
          <u-form-item label="租赁数量" prop="quantity" class="form-item">
            <u-number-box 
              v-model="formData.quantity"
              :min="1"
              :max="deviceInfo.availableQuantity || 10"
              @change="onQuantityChange"
            />
          </u-form-item>

          <!-- 使用地址 -->
          <u-form-item label="使用地址" prop="address" class="form-item">
            <view class="address-selector" @click="selectAddress">
              <text class="address-text" v-if="formData.address">{{ formData.address }}</text>
              <text class="address-placeholder" v-else>请选择或输入使用地址</text>
              <u-icon name="map-pin" size="16" />
            </view>
          </u-form-item>

          <!-- 联系信息 -->
          <view class="contact-section">
            <u-form-item label="联系人" prop="contactName" class="form-item">
              <u-input 
                v-model="formData.contactName"
                placeholder="请输入联系人姓名"
                clearable
              />
            </u-form-item>
            
            <u-form-item label="联系电话" prop="contactPhone" class="form-item">
              <u-input 
                v-model="formData.contactPhone"
                placeholder="请输入联系电话"
                type="number"
                maxlength="11"
                clearable
              />
            </u-form-item>
          </view>

          <!-- 使用用途 -->
          <u-form-item label="使用用途" prop="purpose" class="form-item">
            <u-radio-group v-model="formData.purpose" wrap>
              <u-radio 
                v-for="purpose in purposeOptions" 
                :key="purpose.value"
                :name="purpose.value"
                :label="purpose.label"
                active-color="#4A90E2"
              />
            </u-radio-group>
          </u-form-item>

          <!-- 特殊需求 -->
          <u-form-item label="特殊需求" prop="requirements" class="form-item">
            <u-textarea 
              v-model="formData.requirements"
              placeholder="请描述特殊需求或注意事项（选填）"
              :maxlength="500"
              count
              height="120"
            />
          </u-form-item>

          <!-- 资质证明上传 -->
          <u-form-item label="资质证明" prop="documents" class="form-item">
            <view class="upload-section">
              <text class="upload-desc">上传营业执照、设备操作资质等相关证明</text>
              <u-upload
                :file-list="documentFiles"
                @after-read="onDocumentUpload"
                @delete="onDocumentDelete"
                name="documents"
                multiple
                :max-count="5"
                accept="image"
              >
                <view class="upload-btn">
                  <u-icon name="plus" size="20" />
                  <text class="upload-text">上传文件</text>
                </view>
              </u-upload>
            </view>
          </u-form-item>
        </u-form>
      </view>

      <!-- 运输配送 -->
      <view class="delivery-card content-card">
        <text class="card-title">配送方式</text>
        
        <u-radio-group v-model="formData.deliveryType">
          <view class="delivery-option" v-for="option in deliveryOptions" :key="option.value">
            <u-radio :name="option.value" active-color="#4A90E2">
              <template #default>
                <view class="option-content">
                  <view class="option-main">
                    <text class="option-title">{{ option.title }}</text>
                    <text class="option-price">{{ option.price > 0 ? `￥${option.price}` : '免费' }}</text>
                  </view>
                  <text class="option-desc">{{ option.description }}</text>
                </view>
              </template>
            </u-radio>
          </view>
        </u-radio-group>
      </view>

      <!-- 费用明细 -->
      <view class="cost-card content-card">
        <text class="card-title">费用明细</text>
        
        <view class="cost-breakdown">
          <view class="cost-item">
            <text class="cost-label">设备租金 ({{ rentalDays }}天 × {{ formData.quantity }}台)</text>
            <text class="cost-value">￥{{ subtotalAmount }}</text>
          </view>
          
          <view class="cost-item">
            <text class="cost-label">配送费用</text>
            <text class="cost-value">￥{{ deliveryFee }}</text>
          </view>
          
          <view class="cost-item">
            <text class="cost-label">服务费 ({{ serviceFeeRate }}%)</text>
            <text class="cost-value">￥{{ serviceFee }}</text>
          </view>
          
          <view class="cost-item">
            <text class="cost-label">押金</text>
            <text class="cost-value">￥{{ totalDeposit }}</text>
          </view>
          
          <view class="cost-divider"></view>
          
          <view class="cost-item total">
            <text class="cost-label">合计</text>
            <text class="cost-value total-amount">￥{{ totalCost }}</text>
          </view>
          
          <view class="payment-note">
            <text class="note-text">* 租金与服务费在确认订单时支付</text>
            <text class="note-text">* 押金在设备归还后7个工作日内退还</text>
          </view>
        </view>
      </view>

      <!-- 合同条款 -->
      <view class="contract-card content-card">
        <text class="card-title">租赁条款</text>
        
        <view class="contract-content">
          <text class="contract-item">1. 设备使用期间，承租方负责设备的安全保管</text>
          <text class="contract-item">2. 如设备发生损坏，需按市场价格进行赔偿</text>
          <text class="contract-item">3. 逾期归还设备按日租金150%收取滞纳金</text>
          <text class="contract-item">4. 设备配送和回收时间需提前24小时预约</text>
        </view>
        
        <view class="agreement-section">
          <u-checkbox-group v-model="agreements">
            <u-checkbox 
              name="contract"
              active-color="#4A90E2"
              :custom-style="{ marginBottom: '16rpx' }"
            >
              我已阅读并同意《设备租赁合同》
            </u-checkbox>
            <u-checkbox 
              name="terms"
              active-color="#4A90E2"
            >
              我已了解设备使用方法和安全注意事项
            </u-checkbox>
          </u-checkbox-group>
        </view>
      </view>

      <!-- 底部间距 -->
      <view class="bottom-spacing"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="cost-summary">
        <text class="cost-text">合计: ￥{{ totalCost }}</text>
        <text class="cost-note">含押金 ￥{{ totalDeposit }}</text>
      </view>
      
      <u-button 
        type="primary"
        :disabled="!canSubmit"
        :loading="submitting"
        @click="submitApplication"
        class="submit-button"
      >
        {{ submitting ? '提交中...' : '提交申请' }}
      </u-button>
    </view>

    <!-- 地址选择弹窗 -->
    <u-popup v-model="showAddressModal" mode="bottom" border-radius="20">
      <view class="address-modal">
        <view class="modal-header">
          <text class="modal-title">选择使用地址</text>
          <u-icon name="close" @click="showAddressModal = false" size="20" />
        </view>
        
        <view class="address-options">
          <view 
            v-for="address in savedAddresses" 
            :key="address.id"
            class="address-item"
            @click="selectSavedAddress(address)"
          >
            <view class="address-main">
              <text class="address-name">{{ address.name }}</text>
              <text class="address-detail">{{ address.detail }}</text>
            </view>
            <u-icon name="arrow-right" size="16" />
          </view>
          
          <view class="address-item add-new" @click="addNewAddress">
            <u-icon name="plus" size="20" />
            <text class="add-text">添加新地址</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 申请成功弹窗 -->
    <u-popup v-model="showSuccessModal" mode="center" :closeable="false">
      <view class="success-modal">
        <view class="success-icon">
          <u-icon name="checkmark-circle-fill" size="60" color="#52c41a" />
        </view>
        <text class="success-title">申请提交成功！</text>
        <text class="success-desc">我们将在24小时内联系您确认订单详情</text>
        <text class="success-order">订单号: {{ orderNumber }}</text>
        
        <view class="success-actions">
          <u-button type="info" plain @click="viewOrder" class="action-btn">
            查看订单
          </u-button>
          <u-button type="primary" @click="backToHome" class="action-btn">
            返回首页
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import apiService from '@/api/index.js'
import { checkLoginStatus } from '@/utils/auth.js'

export default {
  data() {
    return {
      deviceId: '',
      deviceInfo: {},
      submitting: false,
      currentStep: 0,
      orderNumber: '',
      
      // 表单数据
      formData: {
        startDate: '',
        endDate: '',
        quantity: 1,
        address: '',
        contactName: '',
        contactPhone: '',
        purpose: 'production',
        requirements: '',
        deliveryType: 'standard'
      },
      
      // 日期相关
      dateRange: [],
      minDate: new Date(),
      maxDate: null,
      defaultDate: [],
      
      // 文档上传
      documentFiles: [],
      
      // 协议同意
      agreements: [],
      
      // 弹窗控制
      showAddressModal: false,
      showSuccessModal: false,
      
      // 选项数据
      purposeOptions: [
        { label: '生产加工', value: 'production' },
        { label: '实验研发', value: 'research' },
        { label: '应急使用', value: 'emergency' },
        { label: '项目试用', value: 'trial' },
        { label: '其他', value: 'other' }
      ],
      
      deliveryOptions: [
        {
          value: 'standard',
          title: '标准配送',
          description: '3-5个工作日送达，专业安装调试',
          price: 0
        },
        {
          value: 'express',
          title: '加急配送',
          description: '24小时内送达，优先安排',
          price: 800
        },
        {
          value: 'pickup',
          title: '自提',
          description: '到指定地点自行提取设备',
          price: 0
        }
      ],
      
      savedAddresses: [
        {
          id: 1,
          name: '公司地址',
          detail: '北京市朝阳区建国路88号SOHO现代城B座'
        },
        {
          id: 2,
          name: '工厂地址',
          detail: '河北省廊坊市燕郊开发区创业路168号'
        }
      ],
      
      progressSteps: [
        { name: '填写信息' },
        { name: '确认订单' },
        { name: '等待审核' },
        { name: '完成申请' }
      ],
      
      // 费用相关
      serviceFeeRate: 5, // 5% 服务费
      
      // 表单验证规则
      formRules: {
        dateRange: [
          {
            required: true,
            message: '请选择租赁时间',
            trigger: ['blur', 'change']
          }
        ],
        quantity: [
          {
            required: true,
            message: '请选择租赁数量',
            trigger: ['blur', 'change']
          }
        ],
        address: [
          {
            required: true,
            message: '请选择使用地址',
            trigger: ['blur', 'change']
          }
        ],
        contactName: [
          {
            required: true,
            message: '请输入联系人姓名',
            trigger: ['blur', 'change']
          }
        ],
        contactPhone: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: ['blur', 'change']
          }
        ],
        purpose: [
          {
            required: true,
            message: '请选择使用用途',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  
  computed: {
    // 计算租赁天数
    rentalDays() {
      if (!this.formData.startDate || !this.formData.endDate) return 0
      
      const start = new Date(this.formData.startDate)
      const end = new Date(this.formData.endDate)
      const diffTime = end.getTime() - start.getTime()
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      return Math.max(0, diffDays)
    },
    
    // 租金小计
    subtotalAmount() {
      return this.rentalDays * (this.deviceInfo.dailyRent || 0) * this.formData.quantity
    },
    
    // 配送费
    deliveryFee() {
      const delivery = this.deliveryOptions.find(d => d.value === this.formData.deliveryType)
      return delivery ? delivery.price : 0
    },
    
    // 服务费
    serviceFee() {
      return Math.round(this.subtotalAmount * this.serviceFeeRate / 100)
    },
    
    // 总押金
    totalDeposit() {
      return (this.deviceInfo.deposit || 0) * this.formData.quantity
    },
    
    // 总费用
    totalCost() {
      return this.subtotalAmount + this.deliveryFee + this.serviceFee + this.totalDeposit
    },
    
    // 是否可以提交
    canSubmit() {
      return this.isFormValid && 
             this.agreements.includes('contract') && 
             this.agreements.includes('terms') &&
             !this.submitting
    },
    
    // 表单是否有效
    isFormValid() {
      return this.formData.startDate &&
             this.formData.endDate &&
             this.formData.quantity > 0 &&
             this.formData.address &&
             this.formData.contactName &&
             this.formData.contactPhone &&
             this.formData.purpose &&
             this.rentalDays > 0
    }
  },
  
  onLoad(options) {
    // 检查登录状态
    if (!checkLoginStatus()) {
      return
    }
    
    this.deviceId = options.deviceId
    if (this.deviceId) {
      this.initPage()
    } else {
      uni.showToast({
        title: '设备ID不能为空',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  
  methods: {
    async initPage() {
      try {
        // 初始化日期
        this.maxDate = new Date(Date.now() + 180 * 24 * 60 * 60 * 1000) // 6个月后
        
        // 加载设备信息
        await this.loadDeviceInfo()
        
        // 预填用户信息
        await this.loadUserInfo()
        
      } catch (error) {
        console.error('页面初始化失败:', error)
      }
    },
    
    async loadDeviceInfo() {
      try {
        const device = await apiService.device.getDeviceDetail(this.deviceId)
        this.deviceInfo = device
        
        // 设置最小租期
        if (device.minRentDays) {
          this.formData.quantity = Math.max(1, device.minRentDays)
        }
        
      } catch (error) {
        console.error('加载设备信息失败:', error)
        uni.showToast({
          title: error.message || '设备信息加载失败',
          icon: 'none'
        })
      }
    },
    
    async loadUserInfo() {
      if (!apiService.auth.isLoggedIn()) return
      
      try {
        const userInfo = await apiService.user.getUserProfile()
        
        // 预填联系信息
        if (userInfo.realName) {
          this.formData.contactName = userInfo.realName
        }
        if (userInfo.phone) {
          this.formData.contactPhone = userInfo.phone
        }
        
      } catch (error) {
        console.error('加载用户信息失败:', error)
      }
    },
    
    showCalendar() {
      this.$refs.calendarRef.open()
    },
    
    onDateRangeChange(range) {
      if (range && range.length === 2) {
        this.formData.startDate = range[0]
        this.formData.endDate = range[1]
        
        // 检查最小租期
        if (this.deviceInfo.minRentDays && this.rentalDays < this.deviceInfo.minRentDays) {
          uni.showToast({
            title: `最少需要租赁${this.deviceInfo.minRentDays}天`,
            icon: 'none'
          })
          this.formData.endDate = ''
        }
      }
    },
    
    onQuantityChange(value) {
      this.formData.quantity = value
    },
    
    selectAddress() {
      this.showAddressModal = true
    },
    
    selectSavedAddress(address) {
      this.formData.address = address.detail
      this.showAddressModal = false
    },
    
    addNewAddress() {
      this.showAddressModal = false
      // 跳转到地址添加页面
      uni.navigateTo({
        url: '/pages/profile/address-add'
      })
    },
    
    async onDocumentUpload(event) {
      try {
        const { file } = event
        
        // 压缩图片
        const compressedFile = await this.compressImage(file)
        
        // 上传到服务器
        const uploadResult = await apiService.device.uploadDeviceImage(compressedFile)
        
        this.documentFiles.push({
          url: uploadResult.url,
          name: file.name,
          size: file.size
        })
        
      } catch (error) {
        console.error('文档上传失败:', error)
        uni.showToast({
          title: '上传失败，请重试',
          icon: 'none'
        })
      }
    },
    
    onDocumentDelete(event) {
      this.documentFiles.splice(event.index, 1)
    },
    
    async compressImage(file) {
      // 图片压缩逻辑
      return file // 简化处理
    },
    
    previewDeviceImage() {
      if (this.deviceInfo.images && this.deviceInfo.images.length > 0) {
        uni.previewImage({
          urls: this.deviceInfo.images,
          current: 0
        })
      }
    },
    
    async submitApplication() {
      if (!this.canSubmit) return
      
      // 表单验证
      try {
        await this.$refs.formRef.validate()
      } catch (errors) {
        console.log('表单验证失败:', errors)
        return
      }
      
      this.submitting = true
      this.currentStep = 1
      
      try {
        const applicationData = {
          deviceId: this.deviceId,
          startDate: this.formData.startDate,
          endDate: this.formData.endDate,
          quantity: this.formData.quantity,
          totalDays: this.rentalDays,
          address: this.formData.address,
          contactName: this.formData.contactName,
          contactPhone: this.formData.contactPhone,
          purpose: this.formData.purpose,
          requirements: this.formData.requirements,
          deliveryType: this.formData.deliveryType,
          documents: this.documentFiles.map(f => f.url),
          costBreakdown: {
            subtotal: this.subtotalAmount,
            deliveryFee: this.deliveryFee,
            serviceFee: this.serviceFee,
            deposit: this.totalDeposit,
            total: this.totalCost
          }
        }
        
        // 提交申请
        const result = await apiService.order.createOrder(applicationData)
        
        this.currentStep = 3
        this.orderNumber = result.orderNumber
        this.showSuccessModal = true
        
      } catch (error) {
        console.error('提交申请失败:', error)
        uni.showToast({
          title: error.message || '提交失败，请重试',
          icon: 'none'
        })
        this.currentStep = 0
      } finally {
        this.submitting = false
      }
    },
    
    handleScrollBottom() {
      // 滚动到底部时的处理
    },
    
    getStatusClass(status) {
      const statusMap = {
        'AVAILABLE': 'status-available',
        'RENTED': 'status-rented',
        'MAINTENANCE': 'status-maintenance',
        'OFFLINE': 'status-offline'
      }
      return statusMap[status] || 'status-unknown'
    },
    
    getStatusText(status) {
      const statusMap = {
        'AVAILABLE': '可租赁',
        'RENTED': '已租出',
        'MAINTENANCE': '维护中',
        'OFFLINE': '已下线'
      }
      return statusMap[status] || '未知状态'
    },
    
    formatDate(dateStr) {
      const date = new Date(dateStr)
      return `${date.getMonth() + 1}月${date.getDate()}日`
    },
    
    viewOrder() {
      this.showSuccessModal = false
      uni.switchTab({
        url: '/pages/orders/list'
      })
    },
    
    backToHome() {
      this.showSuccessModal = false
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rent-apply-page {
  background: $bg-color;
  min-height: 100vh;
}

.progress-section {
  background: $bg-white;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.page-content {
  padding: 0 32rpx 200rpx;
  height: calc(100vh - 200rpx);
}

.content-card {
  background: $bg-white;
  border-radius: $border-radius-lg;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: $box-shadow-light;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: $font-size-lg;
  font-weight: $font-weight-bold;
  color: $text-primary;
}

.device-status {
  padding: 8rpx 16rpx;
  border-radius: $border-radius-sm;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;
  
  &.status-available {
    background: rgba(92, 184, 92, 0.1);
    color: #5CB85C;
  }
}

.device-info {
  display: flex;
  gap: 24rpx;
}

.device-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: $border-radius-base;
  flex-shrink: 0;
}

.device-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.device-title {
  font-size: $font-size-lg;
  font-weight: $font-weight-bold;
  color: $text-primary;
}

.device-subtitle, .device-location {
  font-size: $font-size-base;
  color: $text-secondary;
}

.device-price {
  margin-top: 16rpx;
}

.price-main {
  font-size: $font-size-xl;
  font-weight: $font-weight-bold;
  color: $primary-color;
  display: block;
  margin-bottom: 8rpx;
}

.price-deposit {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.form-item {
  margin-bottom: 32rpx;
  
  :deep(.u-form-item__body) {
    padding: 0;
    border-bottom: none;
  }
}

.date-section {
  border: 2rpx solid $border-color;
  border-radius: $border-radius-base;
  padding: 24rpx;
  margin-bottom: 32rpx;
}

.date-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: $bg-color;
  border-radius: $border-radius-sm;
}

.date-text {
  font-size: $font-size-base;
  color: $text-primary;
}

.date-placeholder {
  font-size: $font-size-base;
  color: $text-placeholder;
}

.rental-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 2rpx solid $border-color;
}

.summary-text {
  font-size: $font-size-base;
  color: $text-secondary;
}

.summary-amount {
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  color: $primary-color;
}

.address-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: $bg-color;
  border-radius: $border-radius-sm;
  border: 2rpx solid $border-color;
}

.address-text {
  font-size: $font-size-base;
  color: $text-primary;
}

.address-placeholder {
  font-size: $font-size-base;
  color: $text-placeholder;
}

.contact-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.upload-section {
  padding: 24rpx;
  background: $bg-color;
  border-radius: $border-radius-base;
}

.upload-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
  margin-bottom: 16rpx;
  display: block;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 32rpx;
  border: 2rpx dashed $border-color;
  border-radius: $border-radius-base;
  background: $bg-white;
}

.upload-text {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.delivery-option {
  padding: 24rpx 0;
  border-bottom: 2rpx solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
}

.option-content {
  margin-left: 48rpx;
}

.option-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.option-title {
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  color: $text-primary;
}

.option-price {
  font-size: $font-size-base;
  color: $primary-color;
  font-weight: $font-weight-medium;
}

.option-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.cost-breakdown {
  padding: 24rpx;
  background: $bg-color;
  border-radius: $border-radius-base;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &.total {
    border-top: 2rpx solid $border-color;
    padding-top: 16rpx;
    margin-top: 16rpx;
    font-weight: $font-weight-bold;
  }
}

.cost-label {
  font-size: $font-size-base;
  color: $text-secondary;
}

.cost-value {
  font-size: $font-size-base;
  color: $text-primary;
  font-weight: $font-weight-medium;
}

.total-amount {
  font-size: $font-size-lg;
  color: $primary-color;
  font-weight: $font-weight-bold;
}

.cost-divider {
  height: 2rpx;
  background: $border-color;
  margin: 16rpx 0;
}

.payment-note {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 2rpx solid $border-color;
}

.note-text {
  font-size: $font-size-xs;
  color: $text-tertiary;
  display: block;
  margin-bottom: 8rpx;
}

.contract-content {
  margin-bottom: 24rpx;
}

.contract-item {
  font-size: $font-size-sm;
  color: $text-secondary;
  line-height: 1.6;
  margin-bottom: 12rpx;
  display: block;
}

.agreement-section {
  padding: 24rpx;
  background: rgba(74, 144, 226, 0.05);
  border-radius: $border-radius-base;
}

.bottom-spacing {
  height: 120rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $bg-white;
  padding: 24rpx 32rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.cost-summary {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.cost-text {
  font-size: $font-size-lg;
  font-weight: $font-weight-bold;
  color: $primary-color;
}

.cost-note {
  font-size: $font-size-xs;
  color: $text-secondary;
}

.submit-button {
  flex: 1;
  height: 88rpx;
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
}

.address-modal {
  max-height: 60vh;
  background: $bg-white;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid $border-color;
}

.modal-title {
  font-size: $font-size-lg;
  font-weight: $font-weight-bold;
  color: $text-primary;
}

.address-options {
  padding: 32rpx;
  max-height: 400rpx;
  overflow-y: auto;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.add-new {
    color: $primary-color;
    justify-content: center;
    gap: 12rpx;
  }
}

.address-main {
  flex: 1;
}

.address-name {
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  color: $text-primary;
  display: block;
  margin-bottom: 8rpx;
}

.address-detail {
  font-size: $font-size-sm;
  color: $text-secondary;
  display: block;
}

.add-text {
  font-size: $font-size-base;
  color: $primary-color;
}

.success-modal {
  width: 600rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  background: $bg-white;
  border-radius: $border-radius-lg;
}

.success-icon {
  margin-bottom: 32rpx;
}

.success-title {
  font-size: $font-size-xl;
  font-weight: $font-weight-bold;
  color: $text-primary;
  margin-bottom: 16rpx;
  display: block;
}

.success-desc {
  font-size: $font-size-base;
  color: $text-secondary;
  margin-bottom: 24rpx;
  display: block;
}

.success-order {
  font-size: $font-size-sm;
  color: $primary-color;
  font-weight: $font-weight-medium;
  margin-bottom: 48rpx;
  display: block;
}

.success-actions {
  display: flex;
  gap: 24rpx;
}

.action-btn {
  flex: 1;
}
</style> 